<template>
	<div class="menu">
		<div class="menu-item" v-for="(item,key) in list" :key="key">
			<!--  -->
			<div class="menu-item-title" @click="onTitleClick(key)">
				<el-icon size="18px" color="#9b9b9b">
					<component :is="item.icon"></component>
				</el-icon>
				<span :style="`font-size: ${item.size};color: ${item.color};`" v-show="item.isShow">{{item.title}}</span>
				<span :style="`font-size: ${item.size};color: ${item.color};`" v-show="!item.isShow">{{item.title}} <span style="color: #999;">（{{item.list.length}}）</span></span>
			</div>
			<!--  -->
			<transition name="slide-fade">
				<div class="menu-item-content" v-show="item.isShow">
					<div class="menu-item-content-item" @click="onItemClick(item1,key,key1)"
						:class="[{active:indexAll[0]===key&&indexAll[1]===key1},{cover:list.length-1===key&&item.list.length-1===key1}]"
						v-for="(item1,key1) in item.list" :key="key1">
						<el-icon
							:style="`color: ${indexAll[0]===key&&indexAll[1]===key1?'#fff':item1?.color||'#5283ff'}`">
							<component :is="item1.icon"></component>
						</el-icon>
						<span class="menu-item-content-item-text">
							{{item1.text}}
						</span>
						<!--  -->
					</div>
				</div>
			</transition>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { useRouter } from 'vue-router';
	const p = defineProps({
		list: {
			type: Array,
			default: []
		},
		isRouter: {
			type: Boolean,
			default: true
		}
	});
	const router = useRouter();
	const indexAll = ref([0, 0, 0]);
	const emits = defineEmits(['onItemClick']);
	//
	const onItemClick = (item : any, key : number, key1 : number, key2) => {
		indexAll.value = [key, key1, key2];
		emits('onItemClick', item, key, key1, key2);
		//
		if (p.isRouter) {
			setTimeout(() => {
				router.push(item.path);
			}, 1);
		}
	}
	//
	const onTitleClick = (key : number) => {
		p.list[key].isShow = !p.list[key].isShow;
	}
</script>

<style scoped lang="scss">
	.menu {
		padding: 10px;

		&-item {
			margin: 2px 0;
			transition: 0.2s;

			&-title {
				display: flex;
				align-items: center;
				font-size: 14px;
				color: rgba(0, 0, 0, 0.45);
				cursor: pointer;
				padding: 4px;
				border-radius: 6px;
				transition: 0.2s;

				.el-icon {
					margin-right: 6px;
				}
			}

			&-title:hover {
				background-color: rgba(0, 0, 0, 0.04);
			}

			&-content {
				transition: 0.3s;

				&-item {
					display: flex;
					align-items: center;
					padding: 6px 4px 6px 24px;
					margin: 2px 0;
					border-radius: 6px;
					cursor: pointer;
					transition: 0.2s;

					.el-icon {}

					&-text {
						margin-left: 10px;
					}
				}

				&-item:hover {
					background-color: rgba(0, 0, 0, 0.04);
				}

				&-item.active {
					background-color: #5283ff;
					color: #fff !important;
				}
			}

			&-content.active {
				height: 0px !important;
				overflow: hidden;
				transition: 0.3s;
			}
		}
	}

	.slide-fade-enter-active,
	.slide-fade-leave-active {
		opacity: 0;
		transition: all 0.2s;
		overflow: hidden;
		transform: translateY(-10px);
	}

	.slide-fade-enter,
	.slide-fade-leave-to {
		opacity: 0;
		overflow: hidden;
		transition: all 0.1s;
		transform: translateY(-10px);
	}
</style>